<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>模拟发短信</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #sms {
            width: 500px;
            height: 300px;
            margin: 50px auto 0;
        }
        #content {
            height: 260px;
            overflow: auto;
            border: 1px solid #000000;
        }
        /*#hover {
            border: 1px solid deeppink;
            cursor: pointer;
        }*/
    </style>
    <script>
        window.onload = function(){
            var oCon = document.getElementById('content');
            var oTxt = document.getElementById('text');
            var oBut = document.getElementById('but');
            var oImg = document.getElementById('img');

            var onOff = true;

            oImg.innerHTML = '用户1：';
            //alert(oImg.src);

            oImg.onclick = function(){
              if(onOff == true){
                  oImg.innerHTML = '用户2：';
                  onOff = false;
              }else{
                  oImg.innerHTML = '用户1：';
                  onOff = true;
              }
            };

            oBut.onclick = function(){
                oCon.innerHTML += oImg.innerHTML +  oTxt.value + '<br/>';
                oTxt.value = '';
            }

        }
    </script>
</head>

<body>
    <div id="sms">
        <div id="content"></div>
        <p id="img">用户</p>
        <label>
            <input id="text" type="text" />
            <input id="but" type="button" value="发送">
        </label>

    </div>
</body>
</html>